/*
 * Copyright 2010 Google Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/* Default namespace is xhtml */
@namespace "http://www.w3.org/1999/xhtml";

/*
  Specify svg namespace in rules.
  Firefox doesn't understand svg|.class {...}, must specify element
  as in svg|g.class {...}
*/
@namespace svg "http://www.w3.org/2000/svg";

/*
 * Theme settings for body tag whose class='txm'
 */
.txm .logo {
  background-image: url(txm.png);
}

.txm .nav, .adsense .g-sidenav-link-on {
  background-color: #5184d2;
}

.txm .menu a {
  background-color: #3a6aad;
}

.txm .menu a:hover {
  background-color: #30578f;
}

/*
 * General XHTML element styles
 */
body {
  background: #e8e9ef;
  font-family: Arial, sans-serif;
  font-size: 81.25%;
  margin: 0;
}

.header {
  margin: 0 0 10px;
  padding: 0;
  background: #fff;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), color-stop(0.5, #fff), to(#e6e9ef));
  background: -moz-linear-gradient(top, #fff 50%, #e6e9ef 100%);
  overflow: hidden;
}

.logo {
  float: left;
  width: 163px;
  height: 54px;
  margin: 10px 0 5px 10px;
  background-repeat: no-repeat;
  background-position: 0 0;
}

logo-text {
  float: left;
  color: #CCCCCC;
}

.right {
  float: right;
  color: gray;
  font-style: italic;
}

/*
 * Actionable links appear when ancestor .actionable element is hovered over.
 */
.delete-link {
  display: none;
  background-image: url(delete.png);
  background-repeat: no-repeat;
  background-size: 80%;
  float: right;
  width: 16px;
  height: 1em;
  cursor: pointer;
}

.snapshot-link {
  display: none;
  background-image: url(camera.png);
  background-repeat: no-repeat;
  background-size: 75%;
  float:right;
  width: 20px;
  height: 1em;
  cursor: pointer;
}

.actionable:hover .delete-link {
  display: block;
}

.actionable:hover .snapshot-link {
  display: block;
}

.left {
  float: left;
}

a {
  color: #06c;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button, .button {
  background: #ddd;
  background: -moz-linear-gradient(top, #fafafa, #ddd);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#fafafa), to(#ddd));
  border: 1px solid #aaa;
  border-top-color: #bbb;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  color: #222;
  padding: 3px 8px;
  text-shadow: 1px 1px #eee;
}

.button:hover {
  border-color: #888;
  border-top-color: #aaa;
  cursor: pointer;
}

h1 {
  font-size: 154%;
  font-weight: normal;
  margin-top: 0;
  margin-bottom: 5px;
}
h2 {
  font-size: 115%;
  margin-top: 0;
  margin-bottom: 5px;
}

hr {
  background: transparent;
  border: 0;
  border-top: 1px solid #ddd;
  height: 1px;
  margin: 0 0 5px 0;
}

.nav {
  background-image: url(gradient.png);
  background-repeat: repeat-x;
  background-position: bottom;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  margin: 0;
  margin-bottom: 1em;
  display: block;
  height: 33px;
  overflow: hidden;
  vertical-align: bottom;
}
.menu {
  list-style: none;
  margin: 0;
  padding: 0 1px;
}

.menu li {
  margin: 0;
  padding: 0;
}

.menu a {
  margin: 4px 0 0 4px;
  padding: 0 7px;
  height: 29px;
  line-height: 2.1;
  display: block;
  float: left;
  background-image: url(gradient.png);
  background-repeat: repeat-x;
  background-position: bottom;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 3px 3px 0 0;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-topright: 3px;
  -webkit-transition: background 0.2s ease-in;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 1px 1px rgba(0,0,0,0.25);
  text-align: center;
  font-weight: bold;
}

.menu a.selected,
.menu a.selected:hover {
  background-color: #e8e9ef;
  background-image: none;
  color: #000;
  cursor: default;
  font-weight: bold;
  text-shadow: 0 1px 1px rgba(255,255,255,0.25);
  border: 1px solid rgba(255,255,255,0.1);
}

/* CSS Tetris Custom Template */
.g-tpl-210 .g-unit {
  display: block;
  margin: 0 15px 0 235px;
  width: auto;
  float: none;
}
.g-tpl-210 .g-first {
  display: block;
  margin: 0 0 0 15px;
  width: 210px;
  float: left;
}

.g-box {
  background: #fff;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-box-shadow: 0px 0px 5px #ccc;
  -webkit-box-shadow: 0px 0px 5px #ccc;
}

/*
 * Background darkening used when multi-levels are displayed.
 */
.background-dark-0 { background: #ffffff;}
.background-dark-1 { background: #f7f7f7;}
.background-dark-2 { background: #efefef;}
.background-dark-3 { background: #e7e7e7;}
.background-dark-4 { background: #dfdfdf;}
.background-dark-5 { background: #d7d7d7;}

.g-box-secondary {
  background: #f5f5f9;
  background: -moz-linear-gradient(top, #f5f5f9, #E7E7F7);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f9), to(#E7E7F7));
}

.g-box-sidelinks {
  padding: 5px 10px;
}

.g-box-splittop {
  background: #EEF3F8;
  border-bottom: 2px solid #5184d2;
  border-radius: 4px 4px 0 0;
  -moz-border-radius: 4px 4px 0 0;
  -webkit-border-radius-bottomright: 0;
  -webkit-border-radius-bottomleft: 0;
  margin: 0;
}

.g-box-splitbottom {
  border-top: 0;
  border-radius: 0 0 4px 4px;
  -moz-border-radius: 0 0 4px 4px;
  -webkit-border-radius-topright: 0;
  -webkit-border-radius-topleft: 0;
  padding-top: 0;
}

.g-box-nopad {
  margin: 0 -10px;
}

/* Side Nav */
.g-sidenav {
  position: relative;
  -webkit-transition: margin 0.2s ease-in;
}

.g-collapsed .g-sidenav {
  margin-left: -184px;
}

.g-collapsed .g-content {
  margin-left: 36px;
}

.g-sidenav-collapse {
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  color: #aaa;
  position: absolute;
  top: 6px;
  right: 6px;
  height: 14px;
  width: 14px;
  text-align: center;
  font-size: 120%;
  vertical-align: top;
  line-height: .7;
  -webkit-transition: color 0.2s ease-in;
  -webkit-transition: border 0.2s ease-in;
}

.g-sidenav-collapse:hover {
  border-color: #aaa;
  color: #666;
  text-decoration: none;
}

.g-collapsed .g-sidenav-collapse {
  display: none;
}

.g-sidenav-expand {
  cursor: pointer;
  opacity: 0;
  position: absolute;
  top: 0;
  left: -8px;
  display: none;
}

.g-collapsed .g-sidenav-expand {
  background: #fff;
  border: 1px solid #bbb;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  color: #aaa;
  display: block;
  font-size: 120%;
  height: 100%;
  line-height: 1.4;
  padding-right: 6px;
  opacity: 1;
  text-align: right;
  width: 100%;
  -moz-box-shadow: 0px 0px 5px #ccc;
  -webkit-box-shadow: 0px 0px 5px #ccc;
  -webkit-transition-property: background, color, opacity;
  -webkit-transition-duration: .2s;
}

.g-sidenav-expand:hover {
  background: #fe8;
  color: #666;
  text-decoration: none;
}

.g-sidenav-link {
  display: block;
  padding: 3px 0;
}

.g-sidenav-link-right {
  float: right;
  cursor: pointer;

}

.g-sidenav-link-short {
  width: 167px;
}

.g-sidenav-link-on {
  background-color: #5184D2;
  background-position: bottom;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  color: #fff;
  font-weight: bold;
  margin: 0 -5px;
  padding: 3px 5px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.25);
}

.g-sidenav-link-open {
}

.g-sidenav-subgroup {
  font-size: 85%;
  padding-left: 10px;
  padding-bottom: 5px;
}

.error {
  color: red;
}

.button {
  align: center;
}

.block {
  clear: both;
  display: block;
}

.form-label {
  width: 20%;
  float: left;
  text-align: right;
  padding-right: 1em;
  margin-bottom: 0.5em;
}

.form-field {
  width: 70%;
  float: left;
  margin-bottom: 0.5em;
}

input[type=text], .form-textarea {
  font-size: medium;
  font-family: monospace;
  width: 30em;
  border-width: 2px;
  border-style: solid;
  border-color: #AAA #CCC #CCC #AAA;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

.form-textbox {
  font-size: medium;
  font-family: monospace;
  width: 30em;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

/*
 * Modal classes. These work by toggling the <body> class to/from 'modal'
 */

.modal-mask {
  display: none;
  background: black;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modal .modal-mask {
  display: block;
  opacity: 0.5;
}

.modal-dialog {
  display: none;
  background: white;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500px;
  margin-left: -266px;
  margin-top: -150px;
  padding: 15px;
  border: 10px solid #BCF;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-box-shadow: 0px 0px 10px #444;
  -webkit-box-shadow: 0px 0px 10px #444;
}

.modal-dialog.active {
  display: block;
}

#footer-panel {
  position: fixed;
  bottom: 0;
  margin-left: -10px;
  width: 100%;
  clear: both;
  text-align: center;
}

/*
 * SVG container styles
 */

.op-container {
  float: left;
}

/*
 * View status is shown next to op headings in composition.
 */
.view-status {
  float: left;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: 0 0;
}

.view-status.value-active {
  background-image: url(on_icon.png);
}

.op-request_reply {}
.op-notification {}
.op-iterative_request_reply {}
.op-one_way {}

/*
 * SVG styles use namespace prefix
 * Dark b/g: #7A754D
 * Light b/g: #C8C798
 * Plain b/g: #FFFAEC
 * Light f/g: #4B9EA6
 * Dark f/g: #117575
 * We use <svg:g ../> elements to group parts of the op with the classes 'op',
 * 'input', 'outputs', 'output', 'field'. Use descendant selectors on these to
 * style parts of the box, eg
 * svg|g.input svg|rect {...} for the input rectangle
 * svg|g.input svg|text {...} for field text
 * svg|g.output svg|use {...} for the output arrows (they are 'use' elements)
 * etc
 */
svg|g.op svg|rect {
  stroke: gray;
  fill: none;
}

svg|g.mask svg|rect {
  fill: #e8e9ef;
}

svg|g.mask svg|rect:hover {
  fill: #999999;
}

svg|g.mask svg|use {
  fill: none;
}

svg|g.input svg|rect {
  fill: #5184d2;
}

svg|g.input svg|rect:hover {
  fill: #3366FF;
}

svg|g.op svg|use {
  stroke: gray;
  stroke-width: 2px;
}

svg|g.output svg|rect {
   fill: #FFCC66;
}

svg|g.output svg|rect:hover {
   fill: #FF9900;
}

svg|g.mask svg|text {
   font-size: 70%;
   stroke: none;
}

svg|g.input svg|text {
   font-size: 70%;
   stroke: none;
}

svg|g.output svg|text {
   font-size: 70%;
   stroke: none;
}

svg|g.fields svg|text {
   font-size: 100%;
   fill: #7A754D;
   stroke: none;
   baseline-shift: -35%;
}

svg|g svg|text.setLabel {
  font-size: 200%;
  fill: gray;
  text-anchor: middle;
  baseline-shift: -35%;
}
